<template>
  <div>
    <!-- 搜索表单 -->
    <div style="margin-bottom:20px;">
      <el-input style="width:240px" placeholder="请输入账号" v-model="act"></el-input>
      <el-input style="width:240px;margin-left: 5px;" placeholder="请输入姓名" v-model="name"></el-input>
      <el-select style="width:240px;margin-left: 5px;" v-model="sex" placeholder="请选择性别">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
      </el-select>
      <el-button style="margin-left:5px;" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left:5px;" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
      <el-button style="margin-left:5px;" type="success" @click="addUser"><i class="el-icon-plus"></i>添加用户</el-button>
    </div>

    <!-- 为网格加网线 -->
    <el-table :data="tableData" stripe>
      <el-table-column prop="id" label="编号" v-show="false"></el-table-column>
      <el-table-column prop="act" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="birth" label="出生日期"></el-table-column>
      <el-table-column prop="addr" label="地址"></el-table-column>
      <el-table-column prop="regdate" label="注册日期"></el-table-column>

      <el-table-column label="操作">
        <template v-slot="scope">
          <!-- scope.row就是当前行数据 -->
          <el-button type="primary" @click="editUser(scope.row.id)"><i class="el-icon-edit">编辑</i></el-button>
          <el-popconfirm
              title="您确定删除这行数据吗吗？"
              @confirm="delUser(scope.row.id)"
              style="margin-left:5px"
            >
              <el-button type="danger" slot="reference"><i class="el-icon-delete">删除</i></el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <UserDialog
        :title="dialog.title"
        :visible="dialog.visible"
        :width="dialog.width"
        :height="dialog.height"
        @onClose="onClose"
    >
        <div slot="content">
            <AddUserList
            @onClose="onClose"
            @onConfirm="onConfirm"
            @load="load">
            </AddUserList>
        </div>
    </UserDialog>

    <!-- 编辑弹窗 -->
    <UserDialog
        :title="dialog.title"
        :visible="dialog.editVisible"
        :width="dialog.width"
        :height="dialog.height"
        @onClose="onClose"
        @onCloseEdit="onCloseEdit"
    >
        <div slot="content">
            <EditUserList
            @onClose="onCloseEdit"
            @onConfirm="onConfirmEdit"
            :id="dialog.id"
            :ts="dialog.ts"
            @load="load">
            </EditUserList>
        </div>
    </UserDialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import UserDialog from '@/components/dialog/Dialog.vue'
import AddUserList from '@/components/dialog/AddUserList.vue'
import EditUserList from '@/components/dialog/EditUserList.vue'

export default {
  name: 'User',
  components:{
    AddUserList,
    UserDialog,
    EditUserList
  },
  data(){
    return {
      // 弹框属性
      dialog:{
        ts:'',
        id:'',
        title:'',
        visible:false,
        editVisible:false,
        width:630,
        height:200
      },
      tableData:[],
      total:0,
      pageNo:1,
      pageSize:5,
      act:'',
      name:'',
      options: [{
          value: '1',
          label: '男'
        }, {
          value: '0',
          label: '女'
        }],
      sex:'',
      show:false
    }
  },
  mounted(){
    this.load()
  },
  methods:{
    load(){
      request.get('/api/page/settings/admin/user/search.do',{
        params:{
          act:this.act,
          name:this.name,
          sex:this.sex,
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
      }).then(res=>{
        this.tableData=res.users
        this.total=res.total
      })
    },
    reset(){
      this.pageNo=1
      this.pageSize=this.pageSize
      this.act=''
      this.name=''
      this.sex=''
      this.load()
    },
    handleSizeChange(pageSize){
      // 改变页面大小按钮触发分页 pageSize是页面大小
      // console.log(pageSize)
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNo){
      // 改变当前页数按钮触发分页 pageNo是当前页数
      // console.log(pageNo)
      this.pageNo=pageNo
      this.load()
    },
    // 新增按钮
    addUser(){
        // 设置弹框属性
        this.dialog.title='新增用户'
        // 弹出对话框
        this.dialog.visible=true
    },
    // 编辑按钮
    editUser(id){
        // 设置弹框属性
        this.dialog.title='编辑用户'
        this.dialog.id=id
        this.dialog.ts=new Date().valueOf() // 获取时间戳
        // 弹出对话框
        this.dialog.editVisible=true
        this.load()
    },
    // 弹框关闭
    onClose(){
        this.dialog.visible=false
    },
    // 弹框确定
    onConfirm(){
        this.dialog.visible=false
    },
    // 编辑弹框关闭
    onCloseEdit(){
        this.dialog.editVisible=false
    },
    // 编辑弹框确定
    onConfirmEdit(){
        this.dialog.editVisible=false
    },
    // 确认删除
    delUser(id){
      request.post('/api/page/settings/admin/user/del.do',{
            id:id
        }).then(res=>{
            if(res.code==="1"){
                this.$notify.success('删除成功')
                this.load()
            }else{
                this.$notify.error(res.message)
            }
        })
    }
  }
}
</script>

<style>

</style>